<template>
  <div>
    <el-card>
      <div class="grid-content bg-purple">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="dangan">
              <label>订单编号：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block" v-text="order.id"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="dangan">
              <label>下单时间：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block" v-text="order.createTime"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="dangan">
              <label>订单状态：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block" v-text="order.status"></div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="dangan">
              <label>预计到达日期：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block"
                   v-text="order.estimatedArrivalTime"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-divider></el-divider>
    <el-collapse v-model="activeNames">
      <el-card>
        <el-collapse-item title="基本信息" name="1">
          <template slot="title">
            <label class="i">基本信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <basic v-bind:order="order"></basic>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="费用信息" name="2">
          <template slot="title">
            <label class="i">费用信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <cost v-bind:order="order"></cost>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="货品信息" name="3">
          <template slot="title">
            <label class="i">货品信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <goods v-bind:goods="goods"></goods>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="取件信息" name="4">
          <template slot="title">
            <label class="i">取件信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <delivery v-bind:id="order.id"></delivery>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="派送信息" name="5">
          <template slot="title">
            <label class="i">派送信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <deliveryCargo v-bind:tid="$route.query.tid"></deliveryCargo>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="运输信息" name="6">
          <template slot="title">
            <label class="i">运输信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <truckDataInfo v-bind:tid="$route.query.tid"></truckDataInfo>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="订单轨迹" name="7">
          <template slot="title">
            <label class="i">订单轨迹</label><i class="header-icon el-icon-info"></i>
          </template>
          <orderCargoTrack v-bind:polylinePath="polylinePath"></orderCargoTrack>
        </el-collapse-item>
      </el-card>
    </el-collapse>
    <el-divider></el-divider>
    <div class="button">
      <router-link :to="$route.query.pathAddr">
        <el-button style="width: 200px;color: black">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import '../orderManagement/css/xiangqing.css'
import orderCargoTrack from './orderCargoTrack'
import deliveryCargo from './deliveryCargo'
import cost from '../orderManagement/cost'
import goods from '../orderManagement/goods'
import delivery from '../orderManagement/delivery'
import basic from '../orderManagement/basic'
import truckDataInfo from '../orderManagement/truckDataInfo'
import OrderAPI from '../../../../src/api/logisticsmanagement/ordermanagement/orderAPI'

export default {
  name: 'orderCargoXQ',
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      order: {
        id: '',
        createTime: '',
        status: 0,
        estimatedArrivalTime: ''
      },
      goods: [],
      polylinePath: [],
    }
  },
  methods: {
    getOrderXQ() {
      OrderAPI.getOrderXQ(this.$route.query.id).then(({data}) => {
        this.order = data.data.pdOrder
        this.goods = data.data.pdOrderCargo
      })
    },
  },
  components: {
    cost, goods, delivery, basic, orderCargoTrack, truckDataInfo, deliveryCargo
  },
  created() {
    this.getOrderXQ()
  },
}

</script>
<style>

</style>
